<template>
  <div :class="[loadSmall ? 'loadingSmall' : 'loading']" v-if="loading">
    <Spin fix>
      <Icon type="ios-loading" size="20" class="dt-loading ivu-anim-loop"></Icon>
      <div>Loading</div>
    </Spin>
  </div>
</template>

<script setup>
  const props = defineProps({
    loading: Boolean,
    loadSmall: Boolean
  })

  console.log(props.loadSmall, 'props')
</script>

<style lang="scss" scoped>
  .loadingSmall {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
  }
  .loading {
    position: fixed;
    left: 200px;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
  }

  .ivu-spin.ivu-spin-fix {
    background-color: rgba(255, 255, 255, 0.7);
  }
</style>
